import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import { getStatListServices } from "@/services/stat";
import { cn } from "@/utils/core-uitls";
import { useRequest } from "ahooks";
import { Pagination, Spin, Table, Typography } from "antd";
import { FC, useState } from "react";
import { useParams } from "react-router-dom";

const { Title } = Typography;

type PropsType = {
  selectedComponentId: string;
  setSelectedComponentId: (id: string) => void;
  setSelectedComponentType: (type: string) => void;
};

const PageStat: FC<PropsType> = ({
  selectedComponentId,
  setSelectedComponentId,
  setSelectedComponentType,
}) => {
  const { id = "" } = useParams();
  const [total, setTotal] = useState(0);
  const [list, setList] = useState([]);
  const { componentList } = useGetComponentInfo();
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const { loading } = useRequest(
    async () => {
      const res = await getStatListServices(id, {
        page: page,
        pageSize: pageSize,
      });
      return res;
    },

    {
      refreshDeps: [page, pageSize],
      onSuccess: (res) => {
        // console.log(res);
        const { total, list } = res;
        setTotal(total);
        setList(list);
      },
    }
  );

  //   console.log(componentList);
  const columns = componentList.map((c) => ({
    title: (
      <div
        className={cn(
          "  font-bold text-gray-500 cursor-pointer",
          selectedComponentId === c.fe_id ? "text-blue-500" : ""
        )}
        onClick={() => {
          setSelectedComponentId(c.fe_id);
          setSelectedComponentType(c.type);
        }}
      >
        {c?.props.title || c.title}
      </div>
    ),
    dataIndex: c.fe_id,
    // key: c.fe_id,
  }));

  const tableElement = (
    <>
      <Table
        pagination={false}
        columns={columns}
        dataSource={list}
        loading={loading}
        rowKey="_id"
      />
      <div className="w-full !text-center mt-6">
        <Pagination
          total={total}
          current={page}
          pageSize={pageSize}
          className="justify-center"
          onChange={(page) => {
            setPage(page);
          }}
          onShowSizeChange={(page, pageSize) => {
            setPage(page);
            setPageSize(pageSize);
          }}
        ></Pagination>
      </div>
    </>
  );
  return (
    <div>
      {loading ? <Spin /> : <Title level={4}>答卷数量: {total}</Title>}
      {!loading && tableElement}
    </div>
  );
};

export default PageStat;
